這個章節讓我們更深入的探討一下 dependencies 常見的錯誤使用方式。我們在前幾篇 useEffect 的深入解析中一再強調過一個概念：useEffect 的用途是同步資料到 React elements 以外的 effect 效果，而不是生命週期 API。 而 useEffect 的 dependencies 是一種「忽略某些不必要的執行」的效能最佳化，而不是用來控制 effect 發生在特定的 component 生命週期，或特定的商業邏輯時機。

更重要的是，dependencies 作為一種效能最佳化，它的檢查與略過 effect 的行為不是邏輯保證的，effect 有可能會在你意想不到的時候重新再次被執行，我們在接下來的篇幅中就會介紹一些可能發生的情境。

你可能會覺得如果我們將 dependencies 填上 [] 的話，effect 就永遠不會再次被執行：

import { useEffect, useState } from "react";
 
function App() {
  const [count, setCount] = useState(0);
 
  useEffect(
    // 這個 effect 在 React 18 中可能會執行兩次
    () => {
      console.log('effect start'); 
      setCount((prevCount) => prevCount + 1);
    },
    []
  );
 
  return <div>{count}</div>;
}

而實際上，這個範例中的 effect 在 React 18 中有可能會在 mount 時被執行兩次，你可以自己到這個 CodeSanbox 試試看。

這是一個 React 18 的 breaking change，不過只有在 Strict mode 以及 dev 版本的 React 中才會發生。你可能會感到詫異為什麼會有這樣的改動，這其實是為了 React 未來版本的改動所提前引入的檢查機制。我們會在下一個章節中再深入介紹相關的細節。

並且事實上，React 也有在官方文件中提到過：hooks 的 dependencies 只是一種效能最佳化而非語意邏輯保證，在未來 React 有可能會在某些時刻「忘記」dependencies 的舊值來釋放記憶體。 因此如果你的 effect 嘗試把 dependencies 作為效能最佳化以外的用途，就有可能連帶導致你的 effect 中的邏輯在你意外的情況時被再次執行。

所以這裡要鄭重強調的是：對 dependencies 誠實不只是一種推薦的 best practice，而是為了保護你的 effect 的可靠性。如果你嘗試逆流而行，在未來版本的 React 中你的 effect 很有可能真的會壞掉，導致應用程式出現非預期的行為。

錯誤用法一：ComponentDidMount in function component

你不應該嘗試使用 useEffect 搭配不誠實的 dependencies 去模擬 class component 中生命週期 API 的效果。事實上，Function component & hooks 本身並沒有直接提供任何生命週期的 API 給開發者使用。 有了資料流以及 effect 同步的設計，即使不仰賴生命週期的 API，你在絕大多數情況下也還是能夠滿足商業邏輯的開發需求。

因此在大多數情況下你都應該優先嘗試拋開生命週期 API 的思考模型，不要以「在某個 component 運作的特定時機去做特定操作來達到效果」這種指令式的思維考慮 effect 的處理，而是應該以「由資料同步到 effect，無論重複同步多少次結果都會正確」的方式來思考。

但如果你真的希望 effect 在 component 的生命週期中只會執行一次怎麼辦？我們還是可以自己用 useRef 建立一個簡單的 flag 來做到類似的效果：

import { useEffect, useState, useRef } from "react";
 
export default function App() {
  const [count, setCount] = useState(0);
  const isEffectCalledRef = useRef(false);
 
  useEffect(
    // 這個 effect 在 React 18 中可能會執行兩次
    () => {
      // 但是 if 條件式裡面的內容有 flag 擋住所以只會執行一次
      if (!isEffectCalledRef.current) {
        isEffectCalledRef.current = true;
        console.log('effect start'); 
        setCount((prevCount) => prevCount + 1);
      }
    },
    []
  );
 
  return <div>{count}</div>;
}

在加上以 useRef 實作的 flag 判斷之後，這個範例中 effect 的商業邏輯就只會執行到一次了。

useRef 除了可以用來儲存真實的 DOM element 之外，其實也很適合用來儲存與畫面沒有連動關係的跨 render 資料。這個範例中我們以 isEffectCalledRef 來儲存布林值來當作一個 flag，預設值會是 false，並且在 effect 中去做條件判斷。當 isEffectCalledRef.current 的值是 false 時，就會執行我們的商業邏輯，並且將 isEffectCalledRef.current 的值改成 true。

由於 ref 的內容是可以跨 render 存取的，因此當我們第一次執行這個 effect 時 isEffectCalledRef.current 是 false 所以會順利執行我們的商業邏輯，而之後重複執行 effect 時 isEffectCalledRef.current 都已經會是 true 所以就能擋在條件式之外。如此一來，即使 effect 會被重複執行，我們真正的商業邏輯也不會被重複執行到 — 而這完全無關乎 dependencies，唯一影響 dependencies 該怎麼填的只有真實的資料依賴情況。

錯誤用法二：用 dependencies 來判斷 effect 的執行邏輯

另一種常見的 effect dependencies 的誤用就是嘗試以其作為 effect 執行與否的邏輯判斷。我們來看看一個錯誤示範：這個範例有兩種 state 資料，我們希望在每次 todos 資料有所改變時，另一個 count state 就會自動 +1：

function App() {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
 
  useEffect(
    () => {
      setCount(prevCount => prevCount + 1);
    },
    [todos] // deps 不誠實，填寫了其實並未使用的依賴
  );

  // ...
}

在這個範例中，我們嘗試欺騙 dependencies 這個 effect 是有依賴於 todos 的，想藉此來控制判斷 todos 資料發生變化時才會執行 effect。但這樣做不是完全可靠的！在未來版本的 React 中，當你的 effect dependencies 因為效能考量而「忘記」前一次 render 的 todos 內容是什麼的時候，即使實際上你本次 render 的 todos 與上一次 render 完全是一樣的，這個 effect 還是會被執行。永遠要記得，當我們欺騙 dependencies 時，很有可能遲早會在某個時刻付出代價。

當你副作用需要商業邏輯上的條件判斷才執行時，你應該自己撰寫那些邏輯，而不是依靠本應該是效能最佳化用途的 dependencies：

function App() {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const prevTodosRef = useRef();  

  useEffect(
    () => {
      if (prevTodosRef.current !== todos) {
        setCount(prevCount => prevCount + 1);
      }
    },
    [todos] // deps 誠實
  );

  useEffect(
    () => {
      // 在畫面 render 以及其它 effects 完成之後，
      // 將本次 render 的 todos 存進 prevTodosRef 中
      prevTodosRef.current = todos;
    },
    [todos]
  );
 
  // ...
}

同樣的，我們可以透過 useRef 去幫助我們記得前一次 render 的值，這樣我們就能在 effect 當中自己寫貨真價實的判斷邏輯，而不是錯誤的依靠 dependencies 來判斷資料的變化。

2024/2 更新 - 實體書平裝版本預購

在經過快要一年的努力後，本系列文的實體書版本推出了～其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節，並以全彩印刷拉滿視覺上的閱讀體驗，現正熱銷中！有興趣的話歡迎參考看看，也歡迎分享給其他有接觸前端的朋友們，非常感謝大家～

《React 思維進化：一次打破常見的觀念誤解，躍升專業前端開發者》

目前首刷的軟精裝版本各大通路已經幾乎都銷售一空，接下來會再刷推出新的平裝版本：

天瓏（平裝版預購）：
https://www.tenlong.com.tw/products/9786263337695

博客來（平裝版）：
https://www.books.com.tw/products/0010982322

momo（平裝版）：
https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=12528845